<template>
	<view>
		<!-- 详情展示 -->
		<view v-if="detailData">
			
			<view class="header">
				<view class="leftflex">
					<image class="leftImage" :src="img" ></image>
				</view>
				<view class="title">{{detailData.eventName}}</view>
			</view>
			<view class="model">
				<u-cell-group>
					<u-cell title="订单状态" :value="status[detailData.registrationStatus].title"></u-cell>
				</u-cell-group>
			</view>
			<view class="model">
				<u-cell-group>
					<u-cell title="订单号" :value="detailData.orderId"></u-cell>
					<u-cell title="报名用户" :value="detailData.nickname"></u-cell>
					<u-cell title="报名时间" :value="detailData.registrationDate"></u-cell>
					<u-cell title="取消时间" :value="detailData.cancelTime" v-if="detailData.registrationStatus === 3" ></u-cell>
					<u-cell title="取消原因" :label="detailData.cancelContent" v-if="detailData.registrationStatus === 3" ></u-cell>
					
				</u-cell-group>
			</view>
			<view  class="model">
				<u-cell-group>
					<u-cell title="订单金额" :value="'￥'+detailData.amount"></u-cell>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//详情编号
				detailId: null,
				//详情数据
				detailData: null,
				//场地图片
				img: '',
				//订单状态
				status: {
					0: {
						title: '待付款',
						color: ''
					},
					1: {
						title: '待签到',
						color: ''
					},
					2: {
						title: '已签到',
						color: ''
					},
					3: {
						title: '已取消',
						color: ''
					}
				}
			}
		},
		onLoad(option) {
			this.detailId = option.id;
			this.fetchList();
		},
		methods: {
			// 获取记录
			fetchList() {
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				var params = {};
				//订单编号检索
				params.id = this.detailId;
				this.$request({
					url: '/blade-merchant-app/merchant-app/order/order-event-detail',
					data: params
				}).then(res => {
					setTimeout(() => {
						var detailData = res.data;
						if(detailData){
							var imgArry = detailData.img.split(",");
							if(imgArry.length>0){
								this.img = imgArry[0];
							}
						}
						this.detailData = res.data;
						
						uni.hideLoading();
					}, 100);
				})
			}
		},
		filters: {
			formatPeriod(value) {
				if (value) {
					const list = value?.split('-');
					return `${list[0].substring(0, 5)}-${list[1].substring(0, 5)}`
				}
				return value;
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
		
		.header {
			background-color: #ffffff;
			text-align: center;
			.leftflex {
				width: 100%;
				.leftImage {
					width: 100%;border-radius: 8rpx;
				}
			}
			.title {
				font-size: 34rpx;line-height: 60rpx;
			}
		}
		.model {
			background-color: #ffffff;margin-top: 20rpx;
		}
	}
</style>
